<style lang="sass" scoped>
    .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td{
        vertical-align: middle;
    }
    .h-search{
        vertical-align: middle;
        line-height: 15px;
    }
    .comm_content_top{
        .brank_nav{
            float: left
        }
        .search{
        }
    }
    .com-block{
        background: #fff;
        padding:15px;
        margin-top:20px;
        .h-search-box{
            background:#f8f9fa;
            padding:15px;
        }
        
    }
</style>

<template>
<div class="container-fluid">
    <div class="comm_content_top clearfix">
        <nav-bar>
            <li slot="nav_two">商品管理</li>
        </nav-bar>
    </div>
    <div class="com-block">
        <div class="top-box mt15 mb15 clearfix">
            <div>
                <div
                    class="inline_block mr10  w-300">
                    <input
                        @keyup.enter="search.isSearch=true"
                        v-model.trim="search.keyWord"
                        placeholder="请输入用户昵称/openId/unionId进行查询" type="text" class="form-control input-sm">
                </div>
                <button 
                    @click="search.isSearch=true"
                    class="btn btn-primary btn-sm">查询</button>
            </div>
        </div>
        <div class="list-box table-responsive">
            <table class="table table_color table-hover">
                <thead>
                    <tr class="tr_default">
                        <th>头像</th>
                        <th>昵称</th>
                        <th>openId</th>
                        <th>unionId</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,i) in dataList">
                        <td>
                            <img :src="item.headimgurl|imgBaseUrl" class="inline_block w-80">
                        </td>
                        <td>{{item.nickname}}</td>
                        <td>{{item.openId}}</td>
                        <td>{{item.unionId}}</td>
                        <td>
                            <router-link
                                :to="{name:'user_detail',query:{uid:item.uid}}"
                                tag="button" class="btn btn-primary btn-xs">查看</router-link>
                            <button
                                @click="modifyUserStatus(item.uid,1)" 
                                class="btn btn-primary btn-xs">冻结</button>
                            <button
                                @click="modifyUserStatus(item.uid,0)" 
                                class="btn btn-primary btn-xs">解冻</button>
                        </td>
                    </tr>
                    <tr v-if="dataList.length==0">
                        <td colspan="5">暂无相关信息</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="tr">
            <page
                :now-page="search.page"
                :page-size="search.pageSize"
                :is-page-list="true"
                :total-count="search.totalcount"
                :is-search="search.isSearch"
                @onPropsChange="searchChange"></page>
        </div>
    </div>

    
</div>
</template>

<script>
    import page from 'components/page'
    import navBar from 'components/navBar'
    export default {
        components: {
           page,
           navBar,
        },
        data(){
            return {
                search:{
                    page:1,
                    pageSize:config.pageSize,
                    totalcount:200,
                    keyWord:'', // 是   string  搜索关键字
                    isSearch:false,
                },
                dataList:[]
            }
        },
        watch:{
            '$route'(to){
                this.search = Object.assign(this.search,to.query);
                this.getList();
            },
        },
        mounted() {
            this.$nextTick(()=>{
                this.getList();  
            })
        },
        methods:{
            searchChange(prop,val){
                this['search'][prop] = val;
            },
            getList(){
                let obj = {
                    keyWord:this.search.keyWord ,// 否   string  搜索关键字
                    pageNo:this.search.page ,//  是   int 当前页
                    pageSize:this.search.pageSize ,//    是   int 当前页显示的条数
                }
                util.ajax({
                    url:config.baseApi+ 'game-manage/api/user/getUserInfoPage',
                    data:util.objDislodge(obj),
                    success:(data=>{
                        this.dataList = data.data.record;
                        this.search.totalcount = data.data.totalNum;
                    })
                })
            },
            //冻结/解冻 type1 冻结   tpye0解冻
            modifyUserStatus(uid,isFree){
                let title = '';

                if(isFree == 1){
                    title = '确认冻结该用户？';
                }else{
                    title = '确认解冻该用户？';
                }
                popup.confirm({
                    title:title,
                    yes:()=>{
                        util.ajax({
                            url:config.baseApi + 'game-manage/api/user/modifyUserStatus',
                            data:{
                                uid:uid, // 是   string  uid
                                isFree:isFree, //  是   string  冻结状态 1-冻结 0-解冻
                            },
                            success:()=>{
                                this.getList();
                            }
                        })
                    }
                })
            }
        }
    }
</script>
